<template>

	<div class="changePhone">
		<div class="content">	
		<div class="title">
			{{step == 0 ?$t("home.tipChange"):''}}
			{{step == 1 ?$t("home.tipModifying"):''}}
		</div>
		<el-steps style="width:500px;margin: 0 auto;" :space="200" :active="step" align-center finish-status="success">
			<el-step :title="$t('home.verification')"></el-step>
			<el-step :title="$t('home.change')"></el-step>
			<el-step :title="$t('home.finish')"></el-step>
		</el-steps>
		<div v-if="step == 0" class='mid_center' >
			<el-form :class="{ className: data }" ref="test_form" :model="test_form" label-width="auto">
			  <el-form-item :label="$t('home.boundPhone')">
			    <p style="text-align: left;font-size: 18px;font-weight: 400;color: #333333;">{{ $store.state.userInfo.phone }}</p>
			  </el-form-item>
			  <el-form-item :label="$t('home.verificationCode')">
				  <el-col :span="14">
				  	<el-input :placeholder="$t('home.enterCode')" v-model="test_form.code"></el-input>
				  </el-col>
				  <el-col :span="9" :offset="1">
				  	<el-button type="primary" style="width:100%;padding-left:0;padding-right:0;" :disabled="test_getCode.disabled"  @click="sendCode(test_form,test_getCode)">{{test_getCode.value}}</el-button>
				  </el-col>
			  </el-form-item>
			  <div>
			  				  <el-button  class="btn" @click='cancel(step)' >{{$t("home.cancel")}}</el-button>
			  				  <el-button  class="btn" @click='submitstep(step)' >{{$t("home.next")}}</el-button>
			  </div>
			 </el-form>
		</div>
		<div v-if="step == 1" class='mid_center'>
			<el-form ref="new_form" :model="new_form" label-width="150px">
			  <el-form-item :label="$t('home.boundPhone')">
			    <el-input v-model="new_form.phone"></el-input>
			  </el-form-item>
			  <el-form-item :label="$t('home.verificationCode')">
			    <el-col :span="14">
			    	<el-input :placeholder="$t('home.enterCode')" v-model="new_form.code"></el-input>
			    </el-col>
			    <el-col :span="9" :offset="1">
			    	<el-button type="primary" style="width:100%;padding-left:0;padding-right:0;" :disabled="new_getCode.disabled"  @click="sendCode(new_form,new_getCode)">{{new_getCode.value}}</el-button>
			    </el-col>
			  </el-form-item>
			  <div>
				<el-button  class="btn" @click='cancel(step)' >{{$t("home.cancel")}}</el-button>
				  <el-button  class="btn" @click='submitstep(step)' >{{$t("home.next")}}</el-button>
			  </div>
			 </el-form>
		</div>
		<div class='mid_center' v-if="step >= 2">
				<i class="iconfont iconmianxingduigou"></i>	
				<div style="margin:5px">{{$t("home.changePhone")}}</div>
				<div style="margin:5px">{{$t("home.changeAccount")}}</div>
				<!-- <button type="" @click="backToHome">回到首页</button> -->
				<el-button style="margin-top: 30px;" type="primary"  @click="backToHome"> {{$t("home.backToHome")}}</el-button>
		</div>
		<button @click="add()">+++</button>
		<button @click="plus()">+++</button>
		<button @click="relogin()">xxx</button>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				step:0,
				test_form:{
					phone:this.$store.state.userInfo.phone,
					code:''
				},new_form:{
					phone:'',
					code:''
				},test_getCode:{
					value:this.$t('home.getCode'),
					disabled:false,
				},new_getCode:{
					value:this.$t('home.getCode'),
					disabled:false
				},
			}
		},methods:{
			backToHome(){
				this.$router.push('/home')
			},
			submitstep(rexxx){
				alert('1')
				if(rexxx == 0){
					if(true){
						this.step++
						this.$message({
							message:this.$t('home.verifySuccessfully'),
							type:'success'
						})
					}else{
						this.$message({
							message:this.$t('home.VerificationCodeError'),
							type:'error'
						})
						this.$message.error(this.$t('home.VerificationCodeError'))
					}
					
				}else if(rexxx == 1){
					if(true){
						this.step++
						this.$message({
							message:this.$t('home.verifySuccessfully'),
							type:'success'
						})
						this.$store.state.userInfo = {}
					}else{
						this.$message({
							message:this.$t('home.VerificationCodeError'),
							type:'error'
						})
						this.$message.error(this.$t('home.VerificationCodeError'))
					}
				}
			},
			add(){
			  // this.step++
			  if (this.step++ > 3) this.step = 3;
			},
			plus(){
				if(this.step-- <0) this.step = 0
			},
			relogin(){
				
				this.$store.state.userInfo = {}
			},
			timeOver(rev){
				var timeo = 60;
				var that = this;
				rev.disabled = true
				var timeStop = setInterval(function(){
					timeo--;
					if (timeo>0) {
						// that.text('重新发送' + timeo +'s');
						// this.$set(getCode,value,'重新发送' + timeo +'s')
						rev.value = that.$t('home.resend') + timeo +'s'
					}else{
						timeo = 60;//当减到0时赋值为60
						// that.$set(rev.getCode,value,'获取验证码')
						rev.value = that.$t('home.getCode')
						
						clearInterval(timeStop);//清除定时器
						rev.disabled = false
					}
				},1000)
			},
			sendCode(rec,rev){
					var testPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
					if (rec.phone == '') {
					this.$alert(this.$t('home.noInputAnything'),  this.$t('home.tips'), {
						  confirmButtonText: this.$t('home.confirm'),
						  callback: action => {
							this.$message({
							  type: 'info',
							  message: `action: ${ action }`
							});
						  }
						});	
					} else if (testPhone.test(rec.phone)) {
						this.timeOver(rev)
						this.$message({
						          message: this.$t('home.pleaseCheckCode'),
						          type: 'success'
						        });
					} else {
						this.$message.error(this.$t('home.phoneNumberIncorrect'));
						// console.log('手机号有误，请重新输入',testPhone.test(rec.phone))
					}
					
				},
		},created(){
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.iconmianxingduigou{
		color: #21D4CF;
		font-size: 150px;
	}
	.btn{
		width: 150px;
		height: 48px;
		background: #21D4CF;
		border-radius: 8px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.changePhone{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 30px;
		text-align: center;
		.content{
			width: 500px;
		}
		.title{
			font-size: 18px;
			font-weight: 400;
			color: #999999;
			line-height: 25px;
			text-align: center;
			margin: 30px 0;
		}
		.mid_center{
			margin: 30px auto;
		}
	}
</style>
